<template name="StarsRating">
    <view class="stars">
        <image @click="btnStars1" class="starsicon" :src="starsObject[0]" mode="widthFix"></image>
        <image @click="btnStars2" class="starsicon" :src="starsObject[1]" mode="widthFix"></image>
        <image @click="btnStars3" class="starsicon" :src="starsObject[2]" mode="widthFix"></image>
        <image @click="btnStars4" class="starsicon" :src="starsObject[3]" mode="widthFix"></image>
        <image @click="btnStars5" class="starsicon" :src="starsObject[4]" mode="widthFix"></image>
        <text class="txt-stars">{{starsIndex}}.0</text>
    </view>
</template>

<script >
    export default {
        name: "StarsRating",
        data() {
            return {
            };
        },
        props: {
            starsIndex: {}, // 星级评价分数
            isEditStars: {}, // 是否编辑星级评价分数
            starsObject: {} // 数组
        },
        methods: {
            btnStars1: function() {
                var _this = this
                console.log("btnStars1 = " + _this.isEditStars)
                if (_this.isEditStars) {
                    _this.$emit("starsClick", 1)
                }
            },
            btnStars2: function() {
                var _this = this
                if (_this.isEditStars) {
                    _this.$emit("starsClick", 2)
                }
            },
            btnStars3: function() {
                var _this = this
                if (_this.isEditStars) {
                    _this.$emit("starsClick", 3)
                }
            },
            btnStars4: function() {
                var _this = this
                if (_this.isEditStars) {
                    _this.$emit("starsClick", 4)
                }
            },
            btnStars5: function() {
                var _this = this
                if (_this.isEditStars) {
                    _this.$emit("starsClick", 5)
                }
            },

        }

    }
</script>

<style lang="scss" scoped>
	.evaluate {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		height: 100rpx;
		border-top: 1rpx solid #e5e5e5;
		margin-top: 30rpx;
	
		.img {
			width: 43rpx;
			height: 43rpx;
			margin-left: 30rpx;
			margin-bottom: 10rpx;
		}
	
		text {
			font-size: 28rpx;
			color: #c4c4c4;
			margin-left: 30rpx;
		}
	}


    .txt-stars {
        color: #ff9900;
        font-size: 30rpx;
        margin-left: 25rpx;
    }

    .starsicon {
        width: 56rpx;
        height: 56rpx;
        margin-left: 10rpx;
    }

    .stars {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
</style> 